<!-- 删除了 eslint-disable no-undef 全局禁用 -->
<template>
  <view class="page-container">
    <!-- 头部区域 -->
    <view class="navbar">
      <view class="navbar-right" @click="goToSetting">
        <uni-icons type="gear" size="24" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 骨架屏加载 -->
    <UserProfileSkeleton v-if="loading" />

    <!-- 用户信息接口失败时的全局错误提示 -->
    <view v-if="!loading && userInfoError" class="error-container">
      <up-empty text="用户信息加载失败，请检查网络连接" mode="data" :show="true">
        <up-button size="mini" text="重新加载" type="primary" @click="retryAll"></up-button>
      </up-empty>
    </view>

    <!-- 实际内容 - 用户信息卡片 -->
    <view v-else-if="!loading && !userInfoError" class="profile-card">
      <!-- 用户信息区域 -->
      <view class="user-info-section">
        <!-- 头像 -->
        <view class="avatar">
          <image
            :src="userInfo.headerImg || '/static/images/logo.jpg'"
            mode="aspectFill"
            style="width: 100%; height: 100%"
          ></image>
        </view>

        <!-- 编辑按钮 -->
        <view class="edit-btn" @click="goToEdit">
          <uni-icons type="compose" size="16" color="#fff"></uni-icons>
          <text class="btn-text">编辑资料</text>
        </view>

        <!-- 用户详细信息 -->
        <view class="user-details">
          <text class="user-name">{{ userInfo.nickName || '张明' }}</text>
          <text class="user-title">{{ userInfo.majorName }}</text>

          <view class="user-info-list">
            <view class="info-item">
              <uni-icons type="home-filled" size="16" color="#666"></uni-icons>
              <text class="info-text">{{ userInfo.schoolName }}</text>
            </view>
            <view class="info-item">
              <uni-icons type="location" size="16" color="#666"></uni-icons>
              <text class="info-text">{{ userInfo.province }}</text>
              <text class="info-text">{{ userInfo.city }}</text>
            </view>
          </view>
        </view>

        <text class="user-bio">{{ userInfo.signature || '专注前端技术,热爱开源' }}</text>
      </view>
    </view>
  </view>

  <!-- 统计数据 -->
  <view v-if="!loading && !userInfoError" class="stats-card">
    <view class="stats-grid">
      <view class="stats-item clickable" @click="goToFollowList">
        <text class="stats-number followCount">{{ userInfo.followCount }}</text>
        <text class="stats-label">关注</text>
      </view>
      <view class="stats-item clickable" @click="goToFansList">
        <text class="stats-number followerCount">{{ userInfo.followerCount }}</text>
        <text class="stats-label">粉丝</text>
      </view>
      <view class="stats-item">
        <text class="stats-number articleCount">{{ userInfo.articleCount }}</text>
        <text class="stats-label">动态</text>
      </view>
    </view>
  </view>

  <!-- Tab切换 -->
  <view v-if="!loading && !userInfoError" class="tabs-card">
    <up-tabs
      :list="tabList"
      :current="currentTab"
      :active-style="{
        color: '#007AFF',
        fontWeight: 'bold',
      }"
      :inactive-style="{
        color: '#666',
      }"
      line-color="#007AFF"
      @change="onTabChange"
    ></up-tabs>
  </view>

  <!-- 内容区域 -->
  <view v-if="!loading && !userInfoError" class="content-card">
    <!-- 文章列表错误提示 -->
    <view v-if="articleListError" class="article-error">
      <up-empty text="文章加载失败，请重试" mode="data" :show="true">
        <up-button size="mini" text="重新加载" type="primary" @click="retryArticleList"></up-button>
      </up-empty>
    </view>

    <!-- 我的动态 -->
    <scroll-view v-else-if="currentTab === 0" class="dynamic-content" enable-flex>
      <up-empty v-if="articleList.length === 0" text="暂无动态内容" mode="list"></up-empty>
      <view v-else class="post-list">
        <PostCard
          v-for="post in articleList"
          :key="post.id"
          :post="post"
          @like="handleLike"
          @comment="handleComment"
          @share="handleShare"
        />
      </view>
    </scroll-view>

    <!-- 我的提问 -->
    <view v-if="currentTab === 1" class="dynamic-content">
      <view v-if="articleList.length === 0" class="empty-content">
        <text class="empty-text">暂无提问内容</text>
      </view>
      <view v-else class="post-list">
        <PostCard
          v-for="post in articleList"
          :key="post.id"
          :post="post"
          @like="handleLike"
          @comment="handleComment"
          @share="handleShare"
        />
      </view>
    </view>

    <!-- 我的点赞 -->
    <view v-if="currentTab === 2" class="dynamic-content">
      <view v-if="articleList.length === 0" class="empty-content">
        <text class="empty-text">暂无点赞内容</text>
      </view>
      <view v-else class="post-list">
        <PostCard
          v-for="post in articleList"
          :key="post.id"
          :post="post"
          @like="handleLike"
          @comment="handleComment"
          @share="handleShare"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { onShow, onLoad, onUnload } from '@dcloudio/uni-app';
  import { get } from '@/utils/request';
  import PostCard from '@/components/PostCard.vue';
  import UserProfileSkeleton from '@/components/UserProfileSkeleton.vue';

  // Tab数据
  const tabList = ref([
    { name: '我的动态', value: 0 },
    { name: '我的提问', value: 1 },
    { name: '我的点赞', value: 2 },
  ]);

  const currentTab = ref(0);

  // 用户信息
  const userInfo = ref({
    followCount: 0,
    followerCount: 0,
    articleCount: 0,
    nickName: '',
    signature: '',
    headerImg: '',
    schoolName: '',
    province: '',
    city: '',
    majorName: '',
  });

  // 文章列表
  const articleList = ref([]);

  // Tab切换事件
  const onTabChange = item => {
    // 如果传入的是对象，提取index值；如果是数字，直接使用
    const index = typeof item === 'object' ? item.index : item;
    currentTab.value = index;
  };

  // 加载状态
  const loading = ref(true);
  const userInfoLoaded = ref(false);
  const articleListLoaded = ref(false);

  // 错误状态
  const userInfoError = ref(false);
  const articleListError = ref(false);

  const getUserInfo = async () => {
    try {
      userInfoError.value = false;

      // 直接从接口获取用户信息，确保数据准确性
      const res = await get('/c/user/getUserInfo');

      // 兼容不同返回结构，提取头像和基础字段
      let serverUser = {};

      if (res) {
        // 检查多种可能的数据结构
        if (res.data && Object.keys(res.data).length > 0) {
          // data里有数据
          serverUser = res.data.userInfo || res.data.user || res.data;
        } else if (res.userName || res.nickName || res.schoolName) {
          // 数据直接在res根级别
          serverUser = res;
        } else {
          // 兜底：检查res的所有可能结构
          serverUser = res.userInfo || res.user || res.data || {};
        }
      }

      const safeHeader = serverUser.headerImg || serverUser.header || serverUser.avatar || '';

      const newUserInfo = {
        followCount: Number(serverUser.followCount || serverUser.fans || 100),
        followerCount: Number(serverUser.followerCount || serverUser.followers || 50),
        articleCount: Number(serverUser.articleCount || serverUser.postCount || 0),
        nickName:
          serverUser.nickName ||
          serverUser.nickname ||
          serverUser.userName ||
          serverUser.name ||
          '张明',
        signature: serverUser.signature || serverUser.bio || '专注前端技术,热爱开源',
        headerImg: safeHeader,
        schoolName: serverUser.schoolName || '',
        province: serverUser.province || '',
        city: serverUser.city || '',
        majorName: serverUser.majorName || '',
      };

      userInfo.value = newUserInfo;

      // 保存到本地存储
      uni.setStorageSync('userInfo', userInfo.value);

      // 标记用户信息已加载
      userInfoLoaded.value = true;

      // 检查是否两个接口都完成了
      checkAllLoaded();
    } catch (error) {
      console.error('获取用户信息失败:', error);

      userInfoError.value = true;
      // 标记用户信息已加载（即使是失败状态）
      userInfoLoaded.value = true;
      // 检查是否两个接口都完成了
      checkAllLoaded();
      // 显示失败 toast
      uni.showToast({
        title: '用户信息加载失败，请重试',
        icon: 'error',
        duration: 1000,
      });
    }
  };

  const getArticleList = async () => {
    try {
      articleListError.value = false;

      // 临时模拟失败，用于测试错误处理
      // throw new Error('模拟文章接口失败');

      const res = await get('/c/me/getArticleList');
      if (res && res.user && res.post) {
        articleList.value = [res];
      }

      // 标记文章列表已加载
      articleListLoaded.value = true;

      // 检查是否两个接口都完成了
      checkAllLoaded();
    } catch (error) {
      console.error('获取文章列表失败:', error);
      articleListError.value = true;
      // 标记文章列表已加载（即使是失败状态）
      articleListLoaded.value = true;
      // 检查是否两个接口都完成了
      checkAllLoaded();
      // 显示失败 toast
      uni.showToast({
        title: '文章加载失败，请重试',
        icon: 'error',
        duration: 1000,
      });
    }
  };

  // 检查是否所有数据都加载完成
  const checkAllLoaded = () => {
    // 如果两个接口都完成了（成功或失败），就结束加载状态
    if (userInfoLoaded.value && articleListLoaded.value) {
      // 两个接口都完成了，延迟一点时间确保骨架屏动画效果
      setTimeout(() => {
        loading.value = false;
      }, 500);
    }
  };

  // 重试文章列表
  const retryArticleList = async () => {
    try {
      articleListLoaded.value = false;
      await getArticleList();
      // 显示成功 toast
      uni.showToast({
        title: '文章列表重新加载成功',
        icon: 'success',
        duration: 1000,
      });
    } catch (err) {
      console.warn('retryArticleList failed:', err);
      // 错误处理已在 getArticleList 中处理
    }
  };

  // 全局重试
  const retryAll = async () => {
    loading.value = true;
    userInfoLoaded.value = false;
    articleListLoaded.value = false;
    try {
      await initData();
      // 显示成功 toast
      uni.showToast({
        title: '数据重新加载成功',
        icon: 'success',
        duration: 1000,
      });
    } catch (err) {
      console.warn('retryAll failed:', err);
      // 错误处理已在各个函数中处理
    }
  };

  // 初始化数据
  const initData = async () => {
    loading.value = true;
    userInfoError.value = false;
    articleListError.value = false;
    userInfoLoaded.value = false;
    articleListLoaded.value = false;

    // 并行请求数据，确保同时加载
    await Promise.all([getUserInfo(), getArticleList()]);
  };

  // 处理点赞
  const handleLike = () => {
    // 这里可以调用点赞接口
  };

  // 处理评论
  const handleComment = () => {
    // 这里可以跳转到评论页面
  };

  // 处理分享
  const handleShare = () => {
    // 这里可以调用分享功能
  };

  // 用户信息更新事件监听器
  const handleUserInfoUpdated = async eventData => {
    try {
      // 重新调用接口获取最新用户信息，确保数据一致性
      await getUserInfo();

      // 显示更新成功消息
      if (eventData.type === 'success' && eventData.message) {
        uni.showToast({
          title: eventData.message,
          icon: 'success',
          duration: 2000,
        });
      }
    } catch (error) {
      console.error('重新获取用户信息失败:', error);

      // 如果网络请求失败，仍然显示更新成功消息，因为保存操作本身是成功的
      if (eventData.type === 'success' && eventData.message) {
        uni.showToast({
          title: eventData.message,
          icon: 'success',
          duration: 2000,
        });
      }
    }
  };

  // 页面加载时添加事件监听和初始化数据
  onLoad(() => {
    uni.$on('userInfoUpdated', handleUserInfoUpdated);
    // 在页面加载时初始化数据
    initData();
  });

  // 页面卸载时移除事件监听
  onUnload(() => {
    uni.$off('userInfoUpdated', handleUserInfoUpdated);
  });

  // 监听页面显示事件，当从其他页面返回时刷新数据
  onShow(() => {
    // 重新注册事件监听（确保不会因为页面切换丢失）
    uni.$off('userInfoUpdated', handleUserInfoUpdated); // 先移除旧的
    uni.$on('userInfoUpdated', handleUserInfoUpdated); // 重新注册

    // 只有当页面不是首次加载时才重新获取用户信息
    // 避免与onLoad中的initData()重复调用
    if (userInfoLoaded.value) {
      getUserInfo();
    }
  });

  const goToEdit = () => {
    uni.navigateTo({
      url: '/pages/set-self-info/index',
      success: res => {
        try {
          res.eventChannel.emit('prefillUser', { ...userInfo.value });
        } catch (err) {
          console.warn('emit prefillUser failed:', err);
        }
      },
    });
  };

  // 跳转到关注列表
  const goToFollowList = () => {
    uni.navigateTo({
      url: '/pages/follow/index',
    });
  };

  // 跳转到粉丝列表
  const goToFansList = () => {
    uni.navigateTo({
      url: '/pages/fans/index',
    });
  };

  // 跳转到设置页面
  const goToSetting = () => {
    uni.navigateTo({
      url: '/pages/setting/index',
    });
  };
</script>

<style lang="scss" scoped>
  /* ==================== 页面整体布局 ==================== */
  .page-container {
    background-color: #f5f5f5;
    /* 页面背景色 - 浅灰色 */
  }

  /* ==================== 顶部导航栏 ==================== */
  .navbar {
    padding: 20px;
    background: linear-gradient(135deg, #007aff 0%, #8b5cf6 100%);
    /* 渐变背景 - 蓝色到紫色 */
    color: white;
    height: 200rpx;
    /* 导航栏高度 */
    width: 100vw;
    /* 占满整个视口宽度 */

    /* 右上角设置按钮 */
    .navbar-right {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }

  /* ==================== 用户信息卡片区域 ==================== */
  .user-info-section {
    position: relative;
    /* 为绝对定位的头像提供定位上下文 */
    padding: 20px;
    background: white;
    padding-top: 60px;
    /* 为头像留出空间 */
  }

  /* ==================== 用户头像 ==================== */
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* 圆形头像 */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
    /* 白色边框 */
    position: absolute;
    top: -100rpx;
    /* 头像向上偏移，与导航栏重叠 */
    left: 20px;
    z-index: 10;
    /* 确保头像在最上层 */

    /* 头像图片样式 */
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      /* 确保图片也是圆形 */
    }
  }

  /* ==================== 编辑资料按钮 ==================== */
  .edit-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #007aff;
    /* 蓝色背景 */
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    /* 圆角按钮 */
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    /* 图标和文字之间的间距 */

    .btn-text {
      color: white;
    }
  }

  /* ==================== 用户详细信息 ==================== */
  .user-details {
    /* 用户姓名 */
    .user-name {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8px;
    }

    /* 用户职位 */
    .user-title {
      font-size: 16px;
      color: #666;
      margin-bottom: 12px;
      display: block;
    }

    /* 用户信息列表（公司、地点、加入时间） */
    .user-info-list {
      margin-bottom: 12px;

      .info-item {
        display: flex;
        align-items: center;
        margin: 4px 0;

        /* 信息文字 */
        .info-text {
          font-size: 14px;
          color: #666;
          margin-left: 8px;
          /* 与图标的间距 */
        }
      }
    }

    /* 用户简介 */
    .user-bio {
      font-size: 14px;
      color: #333;
      margin-bottom: 12px;
      display: block;
    }
  }

  /* ==================== 统计数据卡片 ==================== */
  .stats-card {
    background: white;
    padding: 20px;

    /* 统计数据网格布局 */
    .stats-grid {
      display: flex;
      justify-content: space-around;
      /* 均匀分布 */

      /* 单个统计项 */
      .stats-item {
        text-align: center;

        /* 统计数字 */
        .stats-number {
          font-size: 20px;
          font-weight: bold;
          color: #333;
          display: block;
        }

        /* 统计标签 */
        .stats-label {
          font-size: 14px;
          color: #666;
          margin-top: 4px;
          display: block;
        }
      }
    }
  }

  /* ==================== Tab切换卡片 ==================== */
  .tabs-card {
    margin: 20rpx 10rpx 10rpx 10rpx;
    /* 外边距 */
    background: white;
    padding: 10rpx;
  }

  /* ==================== 内容区域卡片 ==================== */
  .content-card {
    background: white;
    padding: 20px;

    /* 空内容状态 */
    .empty-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 200px;

      .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
      }

      .empty-text {
        font-size: 16px;
        color: #666;
      }
    }

    /* 文章列表 */
    .post-list {
      margin-top: 20rpx;
    }

    /* 动态内容区域（可滚动） */
    .dynamic-content {
      margin: -20px;
      /* 负边距，让内容延伸到卡片边缘 */
      min-height: 200px;
      /* 最小高度，避免内容过少时的空白 */
      max-height: 60vh;
      /* 最大高度，内容过多时可滚动 */
    }

    /* 文章列表错误提示 */
    .article-error {
      padding: 40px 20px;
    }

    /* 全局错误容器 */
    .error-container {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 60vh;
      /* 最小高度，确保错误信息居中 */
      padding: 40px 20px;
    }
  }
</style>
